<!-- 空间分类 -->
<template>
    <div>
        <el-form ref="querySpaceDataRef" :inline="true" :model="classification" class="demo-form-inline" size="medium">
            <el-form-item label="类别名称：">
                <el-input v-model="classification.spaceName" placeholder="请输入类别名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="onSubmit">查 询</el-button>
                <el-button type="info" @click="SpaceDataResetForm">重 置</el-button>
            </el-form-item>
        </el-form>
        <el-button type="info" @click="addspaceName" size="medium">新 建</el-button>
        <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column label="序号" type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column property="spaceName" label="类别名称">
            </el-table-column>
            <el-table-column property="createTime" label="创建时间">
            </el-table-column>
            <el-table-column property="address" label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="querySpaceDataRef" :inline="true" :model="addclassification" class="demo-form-inline">
                <el-form-item label="类别名称：">
                    <el-input v-model="addclassification.spaceName" placeholder="请输入类别名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentPage4: 4,
            title: '',
            dialogVisible: false,
            classification: {
                // 类别名称
                spaceName: ''
            },
            // 新增
            addclassification: {
                // 类别名称
                spaceName: ''
            },
            // table 表格
            tableData: [{
                // 类别名称
                spaceName: '图书馆',
                // 创建时间
                createTime: '2023-04-15 15:24:14',
            }, {
                spaceName: '图书馆',
                createTime: '2023-04-15 15:24:14',
            }, {
                spaceName: '图书馆',
                createTime: '2023-04-15 15:24:14',
            }, {
                spaceName: '图书馆',
                createTime: '2023-04-15 15:24:14',
            }, {
                spaceName: '图书馆',
                createTime: '2023-04-15 15:24:14',
            }],
        }
    },
    methods: {
        // 不足两位数 补0操作
        indexMethod(index) {
            return (index + 1).toString().padStart(2, '0');
        },
        handleClose(done) {
        },
        // 查询
        onSubmit() {

        },
        // 重置
        SpaceDataResetForm() {

        },
        // 新建空间分类名称
        addspaceName() {
            this.title = '新建空间类别'
            this.dialogVisible = true
            this.classification.spaceName = ''
        },
        handleCurrentChange() {

        },
        // 点击编辑执行的内容
        handleClick(e) {
            this.title = '修改'
            this.dialogVisible = true
            this.classification.spaceName = e.spaceName
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }

}
</script>

<style lang="less" scoped></style>